<!DOCTYPE html>
<!-- saved from url=(0068)https://codelover.club/coursefiles/Fmxcf_VDxZuyeQtHze6oCnVkMauX.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="item prompt">
        <img src="hagendasi.jpg" alt="">
    </div>
    <div class="item prompt">
        <img src="heiyi.jpg" alt="">
    </div>
    <style>
        .item {
            width: 414px;
        }

        .item img {
            /* 让img适应父元素，为保持比例，只设宽度 */
            width: 100%;
        }

        .prompt {
            /* 这个很重要！！！！，让促销标志以促销品做绝对定位参照 */
            position: relative;
        }

        .prompt::before {
            /* 插入左上促销标志 */
            content: url(zuoshang.png);
            position: absolute;
        }

        .prompt::after {
            /* 在这里插入右下促销标志 */
            content: url(youxia.png);
            position: absolute;
            right: 0px;
            bottom: 0px;

        }
    </style>



</body></html>